<template>
	<div class="page-container">
		<!-- 固定尺寸的登录窗口 -->
		<div class="login-window">
			<!-- 左侧面板 -->
			<div class="left-panel">
				<h2>家庭医生后台管理系统</h2>
				<img src="../assets/loginback.png" class="doctor-img">
			</div>

			<!-- 右侧登录面板 -->
			<div class="right-panel">
				<img src="../assets/loginicon.jpg" style="width: 40px;height: 40px;">
				<h1>欢迎登录</h1>

				<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
					<!-- 用户名输入 -->
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" placeholder="用户名" prefix-icon="el-icon-user"></el-input>
					</el-form-item>

					<!-- 密码输入 -->
					<el-form-item prop="password">
						<el-input v-model="loginForm.password" type="password" placeholder="密码"
							prefix-icon="el-icon-lock" show-password></el-input>
					</el-form-item>

					<!-- 同意条款 -->
					<el-form-item class="agree-policy">
						<el-checkbox v-model="loginForm.agree">
							我已阅读并同意《用户隐私政策》
						</el-checkbox>
					</el-form-item>

					<!-- 登录按钮 -->
					<el-form-item>
						<el-button type="primary" @click="handleLogin" class="login-btn" size="medium">
							登录
						</el-button>
					</el-form-item>

					<!-- 忘记密码提示 -->
					<p class="forget-pwd">忘记密码请联系管理员</p>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				loginForm: {
					username: '',
					password: '',
					agree: false
				},
				loginRules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						sessionStorage.setItem("username", this.loginForm.username)
						sessionStorage.setItem("userId", this.loginForm.username)
						this.$router.push("/index")
						this.$message.success('登录成功');
					} else {
						this.$message.error('请填写完整登录信息');
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped>
	.page-container {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f0f2f5;
	}

	.login-window {
		width: 1200px;
		height: 660px;
		max-width: 90vw;
		max-height: 90vh;
		min-width: 320px;
		min-height: 480px;
		display: flex;
		overflow: hidden;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
		border-radius: 6px;
		transform: scale(1);
	}

	.left-panel {
		width: 50%;
		height: 100%;
		background-color: #2f80ed;
		color: white;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px 16px;
		box-sizing: border-box;
	}

	.left-panel h2 {
		font-size: 1.5rem;
		font-weight: bold;
		margin-bottom: 24px;
		text-align: center;
	}

	.doctor-img {
		width: 349px;
		height: 244px;
		object-fit: contain;
	}

	.right-panel {
		width: 50%;
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px 16px;
		box-sizing: border-box;
	}

	.right-panel h1 {
		font-size: 1.75rem;
		font-weight: bold;
		margin-bottom: 24px;
		text-align: center;
	}

	.login-form {
		width: 100%;
		max-width: 320px;
	}

	.agree-policy {
		margin-bottom: 16px;
		font-size: 0.875rem;
	}

	.login-btn {
		width: 100%;
		background-color: #2f80ed;
		border-color: #2f80ed;
		padding: 10px 0;
	}

	.login-btn:hover {
		background-color: #2962c9;
		border-color: #2962c9;
	}

	/* 忘记密码：适配小屏幕字体 */
	.forget-pwd {
		text-align: center;
		margin-top: 16px;
		font-size: 0.875rem;
		color: #888;
	}

	.el-input {
		border-radius: 20px;
	}
</style>